<template>
  <div>
    <Header :head="head" />
    <input type="text" v-model="newUs" placeholder="输入新用户名" />
    <p>5-12字符之间</p>
    <input type="button" value="修改" @click="modifyUs" />
  </div>
</template>

<script>
import Header from '../../common/Header'
import { Toast } from 'mint-ui'
export default {
  components: {
    Header
  },
  data() {
    return {
      head: '修改用户名',
      newUs: null
    }
  },
  methods: {
    modifyUs() {
      //不能为中文,长度在6-12之间
      if (
        // /[\u4e00-\u9fa5]/g.test(this.newUs) ||
        Buffer.byteLength(this.newUs) < 6 ||
        Buffer.byteLength(this.newUs) > 12
      ) {
        window.console.log(this.newUs)
        Toast({
          message: '用户名格式有误',
          duration: 1000
        })
      } else {
        let user = JSON.parse(localStorage.getItem('user'))
        if (this.newUs == user.username) {
          Toast({
            message: '新用户名与原名相同',
            duration: -1
          })
        } else {
          user.username = this.newUs
          localStorage.setItem('user', JSON.stringify(user))
          window.location.hash = '/major/my/detailed'
        }
      }
    }
  }
}
</script>
<style  scoped>
input[type='button'] {
  margin: 5vw 5% 0 5%;
  width: 90%;
  background-color: #26a2ff;
}
input[type='text'],
input[type='password'] {
  margin: 5vw 0 0 0 !important;
}
p {
  color: red;
  margin: 0;
  font-size: 3vw;
}
</style>